import React, { useEffect, useState } from 'react';
import './App.css';


import { useKeycloak } from '@react-keycloak/web'
import { KeycloakProfile } from 'keycloak-js';


function App() {
  const { initialized, keycloak } = useKeycloak();
  const [userInfo, setUserInfo] = useState({} as KeycloakProfile);
  // console.log("userInfo:",userInfo, userInfo.hasOwnProperty("email"));
  useEffect(() => {
    if (initialized && Object.keys(userInfo).length === 0) {
      keycloak.loadUserInfo().then((data) => {
        setUserInfo(data as KeycloakProfile)
      });
    }
  }, [initialized, keycloak, userInfo]);

  return (
    <div style={{ "padding": "10px" }}>
      <h2>{`用户 ${!keycloak.authenticated ? '未 ' : '已'
        } 认证`}</h2>

      {!!keycloak.authenticated && (
        <div>
          <br /> <h3>1、安全域角色：学习者 </h3>
          <br /> {keycloak.hasRealmRole("学习者") ? "我 是 身份管理中心的学习者" : "我 不是 身份管理中心的学习者"}
          <br /> <h3>2、应用角色：学员 兵员 </h3>
          <br /> {keycloak.hasResourceRole("学员", "KC-APP-SSO-TEST1") ? "我 是 学员" : "我 不是 学员"}
          <br /> {keycloak.hasResourceRole("兵员", "KC-APP-SSO-TEST1") ? "我 是 兵员" : "我 不是 兵员"}
          <br />
          <button type="button" onClick={() => keycloak.accountManagement()}>
            我的账户
          </button>
          &nbsp;
          <button type="button" onClick={() => keycloak.logout()}>
            {`退出 ${userInfo.email} `}
          </button>
        </div>
      )}
    </div>
  )
}

export default App;
